







<template>
  <div class="quick-start-page tech-gradient-bg">
    <div class="container">
      <div class="main-content-wrapper">
        <!-- 侧边导航 -->
        <aside class="sidebar" ref="sidebar">
          <nav>
            <ul class="nav-list">
              <li class="nav-item" :class="{ active: activeSection === 'intro' }"><a href="#intro" class="nav-link" click="scrollToSection('intro')"> <span class="nav-icon">📖</span> <span>介绍</span> </a></li>
              <li class="nav-item" :class="{ active: activeSection === 'quick-start' }"><a href="#quick-start" class="nav-link" click="scrollToSection('quick-start')"> <span class="nav-icon">🚀</span> <span>快速开始</span> </a></li>
              <li class="nav-item" :class="{ active: activeSection === 'create-app' }"><a href="#create-app" class="nav-link" click="scrollToSection('create-app')"> <span class="nav-icon">✨</span> <span>创建应用</span> </a></li>
              <li class="nav-item" :class="{ active: activeSection === 'edit-app' }"><a href="#edit-app" class="nav-link" click="scrollToSection('edit-app')"> <span class="nav-icon">✏️</span> <span>编辑应用</span> </a></li>
              <li class="nav-item" :class="{ active: activeSection === 'prompt-optimization' }"><a href="#prompt-optimization" class="nav-link" click="scrollToSection('prompt-optimization')"> <span class="nav-icon">⚡</span> <span>提示词优化</span> </a></li>
              <li class="nav-item" :class="{ active: activeSection === 'faq' }"><a href="#faq" class="nav-link" click="scrollToSection('faq')"> <span class="nav-icon">❓</span> <span>常见问题</span> </a></li>
            </ul>
          </nav>
        </aside><!-- 内容区域 -->
        <main class="content">
          <!-- 平台介绍 -->
          <section id="intro" class="section">
            <h2 class="section-title tech-heading">平台介绍</h2>
            <div class="section-content">
              <div class="platform-intro tech-card">
                <p class="tech-text">Hong AI应用生成平台 是一款强大的 AI 驱动的代码生成平台，旨在帮助开发者快速创建、编辑和优化 Web 应用。我们的平台集成了先进的人工智能技术，能够根据您的需求生成高质量的代码，大大提高开发效率。</p>
              </div><!-- 核心功能 -->
              <div class="core-features">
                <h3 class="tech-subheading">核心功能</h3>
                <div class="features-grid">
                  <div class="feature-card tech-card">
                    <div class="feature-icon">
                      🤖
                    </div>
                    <h4 class="feature-title tech-heading">AI 驱动</h4>
                    <p class="feature-description tech-text">智能生成应用代码，无需复杂编程</p>
                  </div>
                  <div class="feature-card tech-card">
                    <div class="feature-icon">
                      👁️
                    </div>
                    <h4 class="feature-title tech-heading">实时预览</h4>
                    <p class="feature-description tech-text">应用生成完成后，即时预览效果</p>
                  </div>
                  <div class="feature-card tech-card">
                    <div class="feature-icon">
                      🚀
                    </div>
                    <h4 class="feature-title tech-heading">快速部署</h4>
                    <p class="feature-description tech-text">一键部署到云端，与好友分享</p>
                  </div>
                  <div class="feature-card tech-card">
                    <div class="feature-icon">
                      🧩
                    </div>
                    <h4 class="feature-title tech-heading">简单易用</h4>
                    <p class="feature-description tech-text">直观的对话界面，无需编程基础</p>
                  </div>
                </div>
              </div><!-- 技术优势 -->
              <div class="tech-advantages tech-card">
                <h3 class="tech-subheading">技术优势</h3>
                <div class="advantages-list">
                  <div class="advantage-item">
                    <div class="advantage-icon">
                      💡
                    </div>
                    <div class="advantage-content">
                      <h4 class="advantage-title">智能理解</h4>
                      <p class="advantage-description">先进的自然语言处理技术，准确理解用户需求</p>
                    </div>
                  </div>
                  <div class="advantage-item">
                    <div class="advantage-icon">
                      🛡️
                    </div>
                    <div class="advantage-content">
                      <h4 class="advantage-title">代码质量</h4>
                      <p class="advantage-description">生成的代码遵循最佳实践，结构清晰，易于维护</p>
                    </div>
                  </div>
                  <div class="advantage-item">
                    <div class="advantage-icon">
                      🌐
                    </div>
                    <div class="advantage-content">
                      <h4 class="advantage-title">云端部署</h4>
                      <p class="advantage-description">支持多种部署方式，确保应用稳定运行</p>
                    </div>
                  </div>
                </div>
              </div><!-- 应用场景 -->
              <div class="application-scenarios tech-card">
                <h3 class="tech-subheading">应用场景</h3>
                <div class="scenarios-grid">
                  <div class="scenario-item">
                    <h4 class="scenario-title">企业官网</h4>
                    <p class="scenario-description">快速搭建企业展示网站，提升品牌形象</p>
                  </div>
                  <div class="scenario-item">
                    <h4 class="scenario-title">个人博客</h4>
                    <p class="scenario-description">搭建个人博客网站，分享知识和经验</p>
                  </div>
                  <div class="scenario-item">
                    <h4 class="scenario-title">电商平台</h4>
                    <p class="scenario-description">构建在线商城，支持商品展示和订单管理</p>
                  </div>
                  <div class="scenario-item">
                    <h4 class="scenario-title">管理系统</h4>
                    <p class="scenario-description">创建各类管理后台，提高运营效率</p>
                  </div>
                  <div class="scenario-item">
                    <h4 class="scenario-title">活动页面</h4>
                    <p class="scenario-description">制作营销活动页面，提升转化效果</p>
                  </div>
                  <div class="scenario-item">
                    <h4 class="scenario-title">工具应用</h4>
                    <p class="scenario-description">开发实用工具应用，解决特定问题</p>
                  </div>
                </div>
              </div>
            </div>
          </section><!-- 快速开始 -->
          <section id="quick-start" class="section">
            <h2 class="section-title tech-heading">快速开始</h2>
            <div class="section-content">
              <div class="quick-start-guide tech-card">
                <p class="tech-text">通过以下简单步骤，您可以快速上手使用我们的平台，创建和部署您的第一个应用。</p><!-- 快速开始步骤 -->
                <div class="steps-container">
                  <div class="step-item">
                    <div class="step-number">
                      1
                    </div>
                    <div class="step-content">
                      <h4 class="step-title tech-subheading">注册并登录</h4>
                      <p class="step-description tech-text">访问我们的平台，注册账号并登录系统</p>
                    </div>
                  </div>
                  <div class="step-item">
                    <div class="step-number">
                      2
                    </div>
                    <div class="step-content">
                      <h4 class="step-title tech-subheading">描述您的需求</h4>
                      <p class="step-description tech-text">通过简单的对话方式，告诉我们您想要创建什么样的应用</p>
                    </div>
                  </div>
                  <div class="step-item">
                    <div class="step-number">
                      3
                    </div>
                    <div class="step-content">
                      <h4 class="step-title tech-subheading">生成代码</h4>
                      <p class="step-description tech-text">AI 将会根据您的需求，智能生成相应的代码</p>
                    </div>
                  </div>
                  <div class="step-item">
                    <div class="step-number">
                      4
                    </div>
                    <div class="step-content">
                      <h4 class="step-title tech-subheading">预览和编辑</h4>
                      <p class="step-description tech-text">预览生成的应用效果，并根据需要进行编辑和调整</p>
                    </div>
                  </div>
                  <div class="step-item">
                    <div class="step-number">
                      5
                    </div>
                    <div class="step-content">
                      <h4 class="step-title tech-subheading">部署应用</h4>
                      <p class="step-description tech-text">一键部署您的应用到云端，与世界分享您的创意</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section><!-- 创建应用 -->
          <section id="create-app" class="section">
            <h2 class="section-title tech-heading">创建应用</h2>
            <div class="section-content">
              <!-- 应用类型选择 -->
              <div class="app-types tech-card">
                <h3 class="tech-subheading">选择应用类型</h3>
                <div class="app-types-grid">
                  <div class="app-type-item tech-card">
                    <div class="app-type-icon">
                      🏢
                    </div>
                    <h4 class="app-type-title tech-heading">企业官网</h4>
                    <p class="app-type-description tech-text">专业的企业形象展示网站，包含产品介绍、公司简介等</p>
                  </div>
                  <div class="app-type-item tech-card">
                    <div class="app-type-icon">
                      📝
                    </div>
                    <h4 class="app-type-title tech-heading">个人博客</h4>
                    <p class="app-type-description tech-text">用于分享个人见解、技术文章和生活感悟的博客平台</p>
                  </div>
                  <div class="app-type-item tech-card">
                    <div class="app-type-icon">
                      🛒
                    </div>
                    <h4 class="app-type-title tech-heading">电商平台</h4>
                    <p class="app-type-description tech-text">功能完备的在线购物平台，支持商品展示、购物车和支付</p>
                  </div>
                  <div class="app-type-item tech-card">
                    <div class="app-type-icon">
                      🧰
                    </div>
                    <h4 class="app-type-title tech-heading">工具应用</h4>
                    <p class="app-type-description tech-text">各种实用工具，如计算器、转换器、生成器等</p>
                  </div>
                </div>
              </div><!-- 创建流程 -->
              <div class="create-flow tech-card">
                <h3 class="tech-subheading">创建流程</h3>
                <div class="flow-steps">
                  <div class="flow-step">
                    <div class="flow-step-number">
                      1
                    </div>
                    <div class="flow-step-content">
                      <h4 class="flow-step-title">明确需求</h4>
                      <p class="flow-step-description">在开始创建之前，明确您想要开发的应用类型和核心功能。例如：</p>
                      <ul class="flow-step-details">
                        <li>网站类型：企业官网、电商平台、个人博客等</li>
                        <li>核心功能：用户登录、商品展示、内容管理等</li>
                        <li>设计风格：简约现代、商务正式、活泼可爱等</li>
                      </ul>
                    </div>
                  </div>
                  <div class="flow-step">
                    <div class="flow-step-number">
                      2
                    </div>
                    <div class="flow-step-content">
                      <h4 class="flow-step-title">详细描述</h4>
                      <p class="flow-step-description">在创建页面的输入框中，用自然语言详细描述您的需求：</p>
                      <ul class="flow-step-details">
                        <li>功能需求：具体说明需要哪些功能模块</li>
                        <li>页面结构：描述页面布局和导航结构</li>
                        <li>样式偏好：说明颜色搭配和设计风格</li>
                        <li>特殊要求：任何特定的技术或功能要求</li>
                      </ul>
                    </div>
                  </div>
                  <div class="flow-step">
                    <div class="flow-step-number">
                      3
                    </div>
                    <div class="flow-step-content">
                      <h4 class="flow-step-title">AI生成</h4>
                      <p class="flow-step-description">点击生成按钮后，AI将分析您的需求并开始创建应用：</p>
                      <ul class="flow-step-details">
                        <li>架构设计：确定应用的整体架构</li>
                        <li>代码生成：生成HTML、CSS、JavaScript/Vue代码</li>
                        <li>样式优化：根据需求调整界面样式</li>
                        <li>功能实现：实现所需的交互功能</li>
                      </ul>
                    </div>
                  </div>
                  <div class="flow-step">
                    <div class="flow-step-number">
                      4
                    </div>
                    <div class="flow-step-content">
                      <h4 class="flow-step-title">预览测试</h4>
                      <p class="flow-step-description">生成完成后，您可以在预览窗口中查看应用效果，并进行测试和调整。</p>
                    </div>
                  </div>
                </div>
              </div><!-- 最佳实践 -->
              <div class="best-practices tech-card">
                <h3 class="section-title">最佳实践</h3>
                <div class="best-practices tech-card">
                  <ul class="practices-list">
                    <li class="practice-item"><span class="practice-number">1</span> <span class="practice-description">清晰需求描述：准确表达您想要的应用功能、风格和布局</span></li>
                    <li class="practice-item"><span class="practice-number">2</span> <span class="practice-description">分步创建：先搭建基础框架，再添加高级功能</span></li>
                    <li class="practice-item"><span class="practice-number">3</span> <span class="practice-description">及时保存：在应用生成后及时保存，避免内容丢失</span></li>
                  </ul>
                </div>
              </div><!-- 提示词示例 -->
              <div class="prompt-examples tech-card">
                <h3 class="section-title">提示词示例</h3>
                <p class="prompt-intro tech-text">以下是一些优质的提示词示例，帮助您更好地描述需求，让AI生成更符合期望的应用。</p>
                <div class="example-container">
                  <h4 class="example-title">个人博客网站</h4>
                  <p class="example-description tech-text">创建一个现代化的个人博客网站，包含以下功能：</p>
                  <ul class="example-list">
                    <li>首页展示最新文章列表，带有标题、摘要和发布日期</li>
                    <li>文章详情页面，支持Markdown格式内容</li>
                    <li>分类页面，按主题分类展示文章</li>
                    <li>关于我页面，展示个人介绍</li>
                    <li>联系页面，包含联系表单</li>
                    <li>设计风格简约现代，主色调使用蓝色(#1890ff)和白色，响应式布局支持移动设备。</li>
                  </ul>
                </div>
                <div class="example-container">
                  <h4 class="example-title">电商产品展示</h4>
                  <p class="example-description tech-text">开发一个手工艺品电商网站，具体要求：</p>
                  <ul class="example-list">
                    <li>产品展示页：网格布局展示商品，包含图片、名称、价格</li>
                    <li>产品详情页：大图展示、详细描述、规格选择、加入购物车</li>
                    <li>购物车功能：商品数量调整、价格计算、结算按钮</li>
                    <li>用户注册登录：邮箱注册、密码登录</li>
                    <li>订单管理：查看订单状态、订单历史</li>
                    <li>采用温馨的暖色调设计，主色调为橙色(#ff6b35)，整体风格亲和友好。</li>
                  </ul>
                </div>
                <div class="example-container">
                  <h4 class="example-title">企业管理系统</h4>
                  <p class="example-description tech-text">构建一个员工管理系统，功能包括：</p>
                  <ul class="example-list">
                    <li>员工信息管理：添加、编辑、删除员工资料</li>
                    <li>部门管理：创建部门、分配员工</li>
                    <li>考勤记录：签到签退、考勤统计</li>
                    <li>权限管理：不同角色访问不同功能</li>
                    <li>数据报表：员工统计、考勤报表</li>
                    <li>界面专业简洁，使用蓝白配色方案，左侧导航栏，顶部工具栏布局。</li>
                  </ul>
                </div>
                <div class="example-container">
                  <h4 class="example-title">在线工具应用</h4>
                  <p class="example-description tech-text">制作一个多功能在线工具集合网站：</p>
                  <ul class="example-list">
                    <li>文本处理工具：字数统计、格式转换、加密解密</li>
                    <li>图片处理：尺寸调整、格式转换、压缩优化</li>
                    <li>代码工具：JSON格式化、代码高亮、二维码生成</li>
                    <li>计算工具：单位换算、汇率计算、BMI计算</li>
                    <li>收藏功能：保存常用工具到个人收藏</li>
                    <li>界面清爽实用，采用卡片式布局，主色调为绿色(#52c41a)，注重用户体验。</li>
                  </ul>
                </div>
              </div>
            </div>
          </section>
          <section id="edit-app" class="section">
            <h2 class="section-title tech-heading">编辑应用</h2>
            <div class="section-content">
              <!-- 编辑功能 -->
              <div class="edit-features tech-card">
                <h3 class="tech-subheading">编辑功能</h3>
                <div class="edit-features-grid">
                  <div class="edit-feature-item tech-card">
                    <div class="edit-feature-icon">
                      📝
                    </div>
                    <h4 class="edit-feature-title tech-heading">代码编辑</h4>
                    <p class="edit-feature-description tech-text">直接编辑生成的代码，满足个性化需求</p>
                  </div>
                  <div class="edit-feature-item tech-card">
                    <div class="edit-feature-icon">
                      🎨
                    </div>
                    <h4 class="edit-feature-title tech-heading">样式调整</h4>
                    <p class="edit-feature-description tech-text">修改颜色、字体、布局等样式属性</p>
                  </div>
                  <div class="edit-feature-item tech-card">
                    <div class="edit-feature-icon">
                      🧩
                    </div>
                    <h4 class="edit-feature-title tech-heading">组件添加</h4>
                    <p class="edit-feature-description tech-text">添加新的组件和功能模块</p>
                  </div>
                  <div class="edit-feature-item tech-card">
                    <div class="edit-feature-icon">
                      🔄
                    </div>
                    <h4 class="edit-feature-title tech-heading">版本管理</h4>
                    <p class="edit-feature-description tech-text">跟踪和管理不同版本的应用代码</p>
                  </div>
                </div>
              </div><!-- 编辑指南 -->
              <div class="edit-guide tech-card">
                <h3 class="tech-subheading">编辑指南</h3>
                <div class="guide-steps">
                  <div class="guide-step">
                    <div class="guide-step-number">
                      1
                    </div>
                    <div class="guide-step-content">
                      <h4 class="guide-step-title tech-heading">打开应用</h4>
                      <p class="guide-step-description tech-text">在应用列表中选择需要编辑的应用</p>
                    </div>
                  </div>
                  <div class="guide-step">
                    <div class="guide-step-number">
                      2
                    </div>
                    <div class="guide-step-content">
                      <h4 class="guide-step-title tech-heading">进入编辑模式</h4>
                      <p class="guide-step-description tech-text">点击编辑按钮，进入应用编辑界面</p>
                    </div>
                  </div>
                  <div class="guide-step">
                    <div class="guide-step-number">
                      3
                    </div>
                    <div class="guide-step-content">
                      <h4 class="guide-step-title tech-heading">修改代码</h4>
                      <p class="guide-step-description tech-text">使用内置编辑器修改代码，或通过简单的对话指令进行调整</p>
                    </div>
                  </div>
                  <div class="guide-step">
                    <div class="guide-step-number">
                      4
                    </div>
                    <div class="guide-step-content">
                      <h4 class="guide-step-title tech-heading">实时预览</h4>
                      <p class="guide-step-description tech-text">随时预览修改后的效果，确保满足需求</p>
                    </div>
                  </div>
                  <div class="guide-step">
                    <div class="guide-step-number">
                      5
                    </div>
                    <div class="guide-step-content">
                      <h4 class="guide-step-title tech-heading">保存更改</h4>
                      <p class="guide-step-description tech-text">确认修改无误后，保存更改并退出编辑模式</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section><!-- 提示词优化 -->
          <section id="prompt-optimization" class="section">
            <h2 class="section-title tech-heading">提示词优化</h2>
            <div class="section-content">
              <!-- 优化原则 -->
              <div class="optimization-principles tech-card">
                <h3 class="tech-subheading">优化原则</h3>
                <div class="principles-list">
                  <div class="principle-item">
                    <div class="principle-icon">
                      💡
                    </div>
                    <div class="principle-content">
                      <h4 class="principle-title">具体明确</h4>
                      <p class="principle-description">使用具体的描述而非模糊的概念，例如"蓝色按钮"而非"好看的按钮"</p>
                    </div>
                  </div>
                  <div class="principle-item">
                    <div class="principle-icon">
                      👥
                    </div>
                    <div class="principle-content">
                      <h4 class="principle-title">结构化描述</h4>
                      <p class="principle-description">按照功能模块、页面结构、样式设计的顺序组织描述</p>
                    </div>
                  </div>
                  <div class="principle-item">
                    <div class="principle-icon">
                      📋
                    </div>
                    <div class="principle-content">
                      <h4 class="principle-title">示例引导</h4>
                      <p class="principle-description">提供具体的参考示例或类似网站，帮助AI理解您的需求</p>
                    </div>
                  </div>
                  <div class="principle-item">
                    <div class="principle-icon">
                      🌐
                    </div>
                    <div class="principle-content">
                      <h4 class="principle-title">技术要求</h4>
                      <p class="principle-description">明确指出需要使用的技术栈或特定功能要求</p>
                    </div>
                  </div>
                </div>
              </div><!-- 提示词编写技巧 -->
              <div class="prompt-writing-tips tech-card">
                <h3 class="tech-subheading">提示词编写技巧</h3>
                <p class="tips-intro">好的提示词是创建优质AI应用的关键。以下是一些编写有效提示词的技巧：</p>
                <div class="tips-list">
                  <div class="tip-section">
                    <div class="tip-icon">
                      💡
                    </div>
                    <div class="tip-content">
                      <h4 class="tip-title">明确描述应用的目的和功能</h4>
                      <p class="tip-description">清楚说明应用要解决什么问题，为谁服务</p>
                    </div>
                  </div>
                  <div class="tip-section">
                    <div class="tip-icon">
                      👥
                    </div>
                    <div class="tip-content">
                      <h4 class="tip-title">使用具体的细节而非抽象的描述</h4>
                      <p class="tip-description">具体的功能描述比模糊的概念更有效</p>
                    </div>
                  </div>
                  <div class="tip-section">
                    <div class="tip-icon">
                      ✅
                    </div>
                    <div class="tip-content">
                      <h4 class="tip-title">指定设计风格和用户界面元素</h4>
                      <p class="tip-description">明确颜色、布局、交互方式等设计要求</p>
                    </div>
                  </div>
                  <div class="tip-section">
                    <div class="tip-icon">
                      🌐
                    </div>
                    <div class="tip-content">
                      <h4 class="tip-title">考虑目标用户和使用场景</h4>
                      <p class="tip-description">了解用户需求，设计符合使用习惯的界面</p>
                    </div>
                  </div>
                  <div class="tip-section">
                    <div class="tip-icon">
                      🔍
                    </div>
                    <div class="tip-content">
                      <h4 class="tip-title">避免过于复杂或模糊的要求</h4>
                      <p class="tip-description">简洁明了的描述更容易被AI理解和实现</p>
                    </div>
                  </div>
                </div>
              </div><!-- 示例提示词 -->
              <div class="example-prompt tech-card">
                <h3 class="tech-subheading">示例提示词</h3>
                <p class="example-intro">想象一下，如果您在给一个同事指派工作任务时，只给了一句话来描述需求，他的任务完成效果可能很难达到您的预期。但如果您提供了明确的目的、建议的思考方向和执行策略等更多参考信息，他更有可能以高标准完成任务。</p>
                <div class="prompt-container">
                  <div class="prompt-inner-container">
                    <div class="prompt-content-wrapper">
                      <!-- 新增容器，包含h4、p和div组件 -->
                      <div class="unified-content-container">
                        <h4 class="prompt-title">结构化描述</h4>
                        <p class="prompt-description">使用清晰的结构组织您的提示词，例如：</p>
                        <div class="prompt-content">
                          <pre class="prompt-code"># 应用类型：在线学习平台
                                                                                          ## 核心功能
                                                                                          - 课程展示：卡片式布局展示课程封面、标题、讲师、价格、评分
                                                                                          - 视频播放：支持全屏播放、进度条、倍速播放、字幕显示
                                                                                          - 学习进度：显示课程完成百分比、已学章节标记
                                                                                          - 用户系统：注册登录、个人资料、学习历史
                                                                                          - 评价系统：课程评分、文字评价、点赞功能
                                                                                          ## 页面布局
                                                                                          - 顶部导航栏：Logo、搜索框、用户头像下拉菜单
                                                                                          - 侧边栏：课程分类、筛选条件（价格、难度、时长）
                                                                                          - 主内容区：课程网格布局，每行显示3-4个课程卡片
                                                                                          - 底部：版权信息、友情链接、联系方式
                                                                                          ## 视觉设计
                                                                                          - 配色方案：主色调深蓝色(#1890ff)，辅助色浅灰色(#f5f5f5)
                                                                                          - 字体：标题使用16-20px粗体，正文使用14px常规字体
                                                                                          - 按钮样式：圆角8px，悬停时颜色加深，点击有按压效果
                                                                                          - 卡片设计：白色背景，阴影效果，悬停时轻微上移
                                                                                          ## 交互细节
                                                                                          - 搜索：实时搜索建议，支持按课程名、讲师名搜索
                                                                                          - 筛选：多选筛选条件，实时更新结果
                                                                                          - 课程卡片：悬停显示课程简介预览
                                                                                          - 响应式：移动端侧边栏收起，课程卡片单列显示</pre>
                        </div>
                      </div><!-- 新增组件：具体而非抽象 -->
                      <div class="unified-content-container">
                        <h4 class="prompt-title">具体而非抽象</h4>
                        <p class="prompt-description">提供具体的细节而非抽象的描述：</p>
                        <div class="prompt-content comparison-container">
                          <div class="comparison-item clear-description">
                            <h5 class="comparison-title">清晰的描述</h5>
                            <p>创建一个任务管理应用，包含以下具体功能：</p>
                            <ul>
                              <li>任务列表：左侧显示"待办"、"进行中"、"已完成"三个分类标签</li>
                              <li>任务卡片：每个任务显示标题、截止日期、优先级（高/中/低用红/黄/绿标签标识）</li>
                              <li>新建任务：点击"+"按钮弹出表单，包含任务名称、描述、截止日期、优先级选择器</li>
                              <li>拖拽功能：任务卡片可在不同状态间拖拽移动</li>
                              <li>配色：主色调使用#1890ff蓝色，背景#f5f5f5浅灰色</li>
                            </ul>
                          </div>
                          <div class="comparison-item vague-description">
                            <h5 class="comparison-title">模糊的描述</h5>
                            <p>做一个任务管理的网站，要好一点，界面简洁美观，功能齐全</p>
                          </div>
                        </div>
                      </div><!-- 新增组件：提供视觉参考 -->
                      <div class="unified-content-container">
                        <h4 class="prompt-title">提供视觉参考</h4>
                        <p class="prompt-description">为AI提供视觉设计参考可以帮助生成更符合您期望的界面：</p>
                        <div class="prompt-content comparison-container">
                          <div class="comparison-item clear-description">
                            <h5 class="comparison-title">有视觉参考</h5>
                            <p>创建一个电商网站，界面风格参考以下特点：</p>
                            <ul>
                              <li>配色方案：使用类似于Amazon的配色，以橙色(#FF9900)为主色调</li>
                              <li>布局风格：参考Shopify的简洁明了布局，突出商品图片展示</li>
                              <li>交互效果：借鉴淘宝的动态购物车添加动画</li>
                              <li>字体选择：使用Inter字体，标题粗体，正文常规</li>
                              <li>图标风格：使用Font Awesome图标库的线性图标</li>
                            </ul>
                          </div>
                          <div class="comparison-item vague-description">
                            <h5 class="comparison-title">无视觉参考</h5>
                            <p>做一个电商网站，颜色要醒目，界面要好看，交互要好</p>
                          </div>
                        </div>
                      </div><!-- 新增组件：迭代优化 -->
                      <div class="unified-content-container">
                        <h4 class="prompt-title">迭代优化</h4>
                        <p class="prompt-description">通过实际案例展示如何逐步完善提示词：</p>
                        <div class="prompt-content">
                          <div class="iteration-container">
                            <div class="iteration-step">
                              <h5>第一次尝试</h5>
                              <div class="prompt-example">
                                <div class="prompt-label">
                                提示词：
                                </div>
                                <div class="prompt-text">
                                创建一个博客网站
                                </div>
                              </div>
                              <div class="result-feedback">
                                <div class="feedback-label">
                                问题：
                                </div>
                                <div class="feedback-text">
                                生成的页面过于简单，缺少导航、分类、搜索功能
                                </div>
                              </div>
                            </div>
                            <div class="iteration-step">
                              <h5>第二次优化</h5>
                              <div class="prompt-example">
                                <div class="prompt-label">
                                提示词：
                                </div>
                                <div class="prompt-text">
                                创建一个个人博客网站，包含文章列表、文章详情、分类页面、关于我页面，使用现代视觉设计
                                </div>
                              </div>
                              <div class="result-feedback">
                                <div class="feedback-label">
                                问题：
                                </div>
                                <div class="feedback-text">
                                页面结构改善了，但样式不够精美，缺少登录和评论功能
                                </div>
                              </div>
                            </div>
                            <div class="iteration-step">
                              <h5>最终版本</h5>
                              <div class="prompt-example">
                                <div class="prompt-label">
                                提示词：
                                </div>
                                <div class="prompt-text">
                                创建个人技术博客，顶部固定导航栏（首页/分类/关于/搜索），主内容区文章卡片布局，每篇文章显示标题、摘要、发布时间、分类标签。文章详情页包含文章内容（支持代码高亮）、目录导航、评论区、相关推荐。配色方案：主色调#1890FF（蓝色），背景#F5F5F5（浅灰色），文字#333333。使用Inter字体，响应式设计适配移动端。
                                </div>
                              </div>
                              <div class="result-success">
                                <div class="success-label">
                                结果：
                                </div>
                                <div class="success-text">
                                生成了功能完整、视觉精美的博客网站，完全满足需求
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section><!-- 常见问题 -->
          <section id="faq" class="section">
            <h2 class="section-title tech-heading">常见问题</h2>
            <div class="section-content">
              <div class="faq-container tech-card">
                <div class="faq-item">
                  <div class="faq-question">
                    <h4 class="faq-question-text tech-heading">Q: 应用生成需要多长时间？</h4>
                  </div>
                  <div class="faq-answer">
                    <p class="faq-answer-text tech-text">A: 一般情况下，简单应用1-3分钟可以生成完成，复杂应用可能需要5-10分钟。</p>
                  </div>
                </div>
                <div class="faq-item">
                  <div class="faq-question">
                    <h4 class="faq-question-text tech-heading">Q: 生成的应用使用的是什么技术？</h4>
                  </div>
                  <div class="faq-answer">
                    <p class="faq-answer-text tech-text">A: 目前生成的项目仅支持 HTML、CSS 、原生 JavaScript和vue技术，后续开发会支持更多的前端技术栈以及后端服务生成。</p>
                  </div>
                </div>
                <div class="faq-item">
                  <div class="faq-question">
                    <h4 class="faq-question-text tech-heading">Q: 我可以将生成的代码用于商业用途吗？</h4>
                  </div>
                  <div class="faq-answer">
                    <p class="faq-answer-text tech-text">A: 是的，您完全可以将生成的代码用于商业用途。我们不限制您对生成代码的使用方式。</p>
                  </div>
                </div>
                <div class="faq-item">
                  <div class="faq-question">
                    <h4 class="faq-question-text tech-heading">Q: 我需要有编程经验才能使用这个平台吗？</h4>
                  </div>
                  <div class="faq-answer">
                    <p class="faq-answer-text tech-text">A: 不需要。我们的平台设计得非常直观，即使没有编程经验的用户也可以通过简单的对话方式创建和部署应用。当然，有编程经验的用户可以获得更多的灵活性和控制权。</p>
                  </div>
                </div>
                <div class="faq-item">
                  <div class="faq-question">
                    <h4 class="faq-question-text tech-heading">Q: 应用部署后，如何进行维护和更新？</h4>
                  </div>
                  <div class="faq-answer">
                    <p class="faq-answer-text tech-text">A: 您可以随时在平台上编辑和更新已部署的应用，修改后重新部署即可。平台还提供了版本管理功能，方便您跟踪和管理应用的不同版本。</p>
                  </div>
                </div>
                <div class="faq-item">
                  <div class="faq-question">
                    <h4 class="faq-question-text tech-heading">Q: AI生成的应用不符合预期怎么办？</h4>
                  </div>
                  <div class="faq-answer">
                    <p class="faq-answer-text tech-text">A: 可以通过对话继续优化，详细描述需要修改的地方。也可以在编辑器选中要修改的代码。</p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  </div>

</template>


<script setup lang="ts">
import {ref, onMounted, onUnmounted} from 'vue'

// 当前活动的导航项
const activeSection = ref('intro')
const sidebar = ref<HTMLElement | null>(null)
const sections = ref<HTMLElement[]>([])

// 处理导航点击，滚动到对应区域
const scrollToSection = (sectionId: string) => {
  activeSection.value = sectionId
  const section = document.getElementById(sectionId)
  if (section) {
    section.scrollIntoView({behavior: 'smooth'})
  }
}

// 监听滚动事件，更新当前活动的导航项
const handleScroll = () => {
  const scrollPosition = window.scrollY + 100

  for (let i = sections.value.length - 1; i >= 0; i--) {
    const section = sections.value[i]
    if (section.offsetTop <= scrollPosition) {
      activeSection.value = section.id
      break
    }
  }
}

// 初始化
onMounted(() => {
  // 获取所有section元素
  sections.value = Array.from(document.querySelectorAll('section'))

  // 添加滚动事件监听
  window.addEventListener('scroll', handleScroll)
})

// 清理
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.quick-start-page {
  min-height: 100vh;
  color: var(--tech-text-primary);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.main-content-wrapper {
  display: flex;
  gap: 30px;
}

/* 侧边导航样式 */
.sidebar {
  width: 260px;
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow-y: auto;
  background: rgba(26, 26, 48, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(42, 42, 74, 0.5);
  box-shadow: var(--tech-shadow);
}

.nav-list {
  list-style: none;
  padding: 20px 0;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: var(--tech-text-secondary);
  text-decoration: none;
  transition: var(--tech-transition);
  border-left: 3px solid transparent;
}

.nav-link:hover {
  color: var(--tech-primary);
  background: rgba(0, 200, 255, 0.1);
}

.nav-item.active .nav-link {
  color: var(--tech-primary);
  border-left-color: var(--tech-primary);
  background: rgba(0, 200, 255, 0.1);
}

.nav-icon {
  font-size: 18px;
}

/* 内容区域样式 */
.content {
  flex: 1;
  min-width: 0;
}

.section {
  margin-bottom: 60px;
}

.section-title {
  font-size: 28px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tech-border);
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 平台介绍样式 */
.platform-intro {
  padding: 24px;
  margin-bottom: 24px;
}

.platform-intro p {
  font-size: 16px;
  line-height: 1.6;
}

/* 核心功能样式 */
.core-features {
  margin-bottom: 24px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.feature-card {
  padding: 24px;
  text-align: center;
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.feature-title {
  font-size: 18px;
  margin-bottom: 12px;
}

.feature-description {
  font-size: 14px;
  color: var(--tech-text-secondary);
}

/* 技术优势和应用场景样式 */
.tech-advantages,
.application-scenarios {
  padding: 24px;
}

.tech-advantages h3,
.application-scenarios h3 {
  margin-bottom: 16px;
}

/* 技术优势 - 横条表格样式 */
.advantages-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advantage-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(26, 26, 48, 0.7);
  border-radius: 12px;
  border-left: 4px solid var(--tech-primary);
  transition: var(--tech-transition);
}

.advantage-item:hover {
  transform: translateX(5px);
  box-shadow: var(--tech-glow);
}

.advantage-icon {
  font-size: 24px;
  margin-right: 16px;
  flex-shrink: 0;
}

.advantage-content {
  flex: 1;
}

.advantage-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tech-text-primary);
  margin: 0 0 4px 0;
}

.advantage-description {
  font-size: 14px;
  color: var(--tech-text-secondary);
  margin: 0;
}

/* 应用场景 - 网格样式 */
.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.scenario-item {
  padding: 16px;
  background: rgba(26, 26, 48, 0.7);
  border-radius: 12px;
  transition: var(--tech-transition);
  text-align: center;
}

.scenario-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--tech-glow);
  background: rgba(26, 26, 48, 0.9);
}

.scenario-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tech-text-primary);
  margin: 0 0 8px 0;
}

.scenario-description {
  font-size: 13px;
  color: var(--tech-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* 快速开始指南样式 */
.quick-start-guide {
  padding: 24px;
}

.steps-container {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-number {
  flex: 0 0 40px;
  height: 40px;
  background: var(--tech-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.step-description {
  color: var(--tech-text-secondary);
  margin: 0;
}

/* 创建应用样式 */
.app-types {
  padding: 24px;
  margin-bottom: 24px;
}

.app-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.app-type-item {
  padding: 24px;
  text-align: center;
}

.app-type-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.app-type-title {
  font-size: 18px;
  margin-bottom: 12px;
}

.app-type-description {
  font-size: 14px;
  color: var(--tech-text-secondary);
}

.create-flow {
  padding: 24px;
  margin-bottom: 24px;
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.flow-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(26, 26, 48, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(42, 42, 74, 0.5);
}

.flow-step-number {
  flex: 0 0 40px;
  height: 40px;
  background: var(--tech-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-top: 4px;
}

.flow-step-content {
  flex: 1;
}

.flow-step-title {
  font-size: 18px;
  color: var(--tech-text-primary);
  margin: 0 0 8px 0;
  font-weight: 600;
}

.flow-step-description {
  color: var(--tech-text-secondary);
  margin: 0 0 8px 0;
}

.flow-step-details {
  color: var(--tech-text-secondary);
  margin: 0;
  padding-left: 20px;
}

.flow-step-details li {
  margin-bottom: 4px;
}

/* 最佳实践样式 */
.best-practices {
  padding: 24px;
}

.practices-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.practice-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(26, 26, 48, 0.7);
  border-radius: 12px;
  border-left: 4px solid var(--tech-primary);
  transition: var(--tech-transition);
}

.practice-item:hover {
  transform: translateX(5px);
  box-shadow: var(--tech-glow);
}

.practice-icon {
  font-size: 24px;
  margin-right: 16px;
  flex-shrink: 0;
}

.practice-content {
  flex: 1;
}

.practice-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tech-text-primary);
  margin: 0 0 4px 0;
}

.practice-description {
  font-size: 14px;
  color: var(--tech-text-secondary);
  margin: 0;
}

/* 编辑应用样式 */
.edit-features {
  padding: 24px;
  margin-bottom: 24px;
}

.edit-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.edit-feature-item {
  padding: 24px;
  text-align: center;
}

.edit-feature-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.edit-feature-title {
  font-size: 18px;
  margin-bottom: 12px;
}

.edit-feature-description {
  font-size: 14px;
  color: var(--tech-text-secondary);
}

.edit-guide {
  padding: 24px;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
}

.guide-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.guide-step-number {
  flex: 0 0 40px;
  height: 40px;
  background: var(--tech-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.guide-step-content {
  flex: 1;
}

.guide-step-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.guide-step-description {
  color: var(--tech-text-secondary);
  margin: 0;
}

/* 提示词优化样式 */
.optimization-principles,
.prompt-writing-tips,
.example-prompt {
  padding: 24px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 1600px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.principles-list,
.tips-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
  width: 100%;
}

.principle-item,
.tip-section {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background: rgba(26, 26, 48, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(42, 42, 74, 0.5);
  transition: var(--tech-transition);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 16px auto;
  box-sizing: border-box;
  justify-content: space-between;
}

.principle-item:hover,
.tip-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--tech-glow);
}

.principle-icon,
.tip-icon {
  font-size: 24px;
  margin-right: 16px;
  flex-shrink: 0;
  margin-top: 4px;
}

.principle-content,
.tip-content {
  flex: 1;
}

.principle-title,
.tip-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tech-text-primary);
  margin: 0 0 8px 0;
}

.principle-description,
.tip-description {
  font-size: 14px;
  color: var(--tech-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.tips-intro {
  font-size: 14px;
  color: var(--tech-text-primary);
  margin: 12px 0 0 0;
  font-style: italic;
}

/* 常见问题样式 */
.faq-container {
  padding: 24px;
}

.faq-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tech-border);
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.faq-question {
  margin-bottom: 12px;
}

.faq-question-text {
  font-size: 18px;
  margin: 0;
}

.faq-answer-text {
  color: var(--tech-text-secondary);
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .features-grid,
  .app-types-grid,
  .edit-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .main-content-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    position: relative;
    top: 0;
    height: auto;
  }

  .features-grid,
  .app-types-grid,
  .edit-features-grid {
    grid-template-columns: 1fr;
  }

  .step-item,
  .flow-step,
  .guide-step {
    flex-direction: column;
    align-items: flex-start;
  }

  .step-number,
  .flow-step-number,
  .guide-step-number {
    flex: 0 0 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* 文字样式 */
.tech-text {
  color: var(--tech-text-primary);
  font-size: 14px;
  line-height: 1.6;
}

/* 示例提示词样式 */
.example-intro {
  color: white;
  font-style: italic;
  font-weight: 500;
  margin: 0;
  padding: 8px 0;
  line-height: 1.5;
  font-size: 16px;
}

.prompt-container {
  background-color: #f5f5f5;
  border-radius: 16px;
  overflow: hidden;
}

.prompt-inner-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.prompt-content-wrapper {
  width: 100%;
  max-width: 1600px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.prompt-title {
  color: #1890ff;
  font-size: 16px;
  font-weight: 600;
  background-color: #f0f2f5;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
  box-sizing: border-box;
}

.prompt-description {
  color: white;
  font-style: italic;
  margin: 0;
  background-color: #ffffff;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
  width: 100%;
  box-sizing: border-box;
}

.prompt-content {
  background-color: #f5f5f5;
  padding: 8px 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
}

.prompt-code {
  background-color: #ffffff;
  color: #333333;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 16px;
  margin: 0 16px;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  white-space: pre-wrap;
  word-break: break-all;
  width: calc(100% - 32px);
  box-sizing: border-box;
}

.prompt-code code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* 统一内容容器样式，确保与div宽度一致 */
.unified-content-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unified-content-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.unified-content-container h4.prompt-title {
  margin-top: 0;
  margin-bottom: 12px;
}

.unified-content-container p.prompt-description {
  margin-bottom: 16px;
}

.unified-content-container .prompt-content {
  margin-top: 8px;
  width: 100%;
}

.prompt-code {
  background-color: #ffffff;
  color: #333333;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 16px;
  margin: 0 16px;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  white-space: pre-wrap;
  word-break: break-all;
  width: calc(100% - 32px);
  box-sizing: border-box;
}

.prompt-code code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* 对比容器样式 */
.comparison-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 对比项通用样式 */
.comparison-item {
  flex: 1;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  padding: 20px;
  box-sizing: border-box;
}

/* 提示词示例样式 */
.prompt-examples {
  padding: 24px;
  margin-bottom: 24px;
}

.example-container {
  background-color: rgba(26, 26, 48, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(42, 42, 74, 0.5);
  padding: 20px;
  margin-bottom: 20px;
  transition: var(--tech-transition);
}

.example-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--tech-glow);
}

.example-title {
  font-size: 18px;
  color: var(--tech-text-primary);
  margin: 0 0 12px 0;
  font-weight: 600;
  border-bottom: 2px solid var(--tech-primary);
  padding-bottom: 8px;
  display: inline-block;
}

.example-description {
  margin: 0 0 12px 0;
}

.example-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.example-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--tech-text-secondary);
  line-height: 1.5;
}

.example-list li::before {
  content: "•";
  color: var(--tech-primary);
  position: absolute;
  left: 0;
  font-size: 20px;
  line-height: 1;
}

/* 迭代优化样式 */
.iteration-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.iteration-step {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.iteration-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.iteration-step h5 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  padding-bottom: 8px;
  display: inline-block;
}

.prompt-example {
  margin-bottom: 12px;
}

.prompt-label {
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
  font-size: 14px;
}

.prompt-text {
  background-color: #f0f2f5;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.result-feedback {
  margin-top: 12px;
}

.feedback-label {
  font-weight: 600;
  color: #ff4d4f;
  margin-bottom: 8px;
  font-size: 14px;
}

.feedback-text {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.result-success {
  margin-top: 12px;
}

.success-label {
  font-weight: 600;
  color: #52c41a;
  margin-bottom: 8px;
  font-size: 14px;
}

.success-text {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.clear-description {
  border-left: 4px solid #52c41a;
  background-color: #f6ffed;
}

/* 模糊描述样式 */
.vague-description {
  border-left: 4px solid #ff4d4f;
  background-color: #fff1f0;
}

/* 对比标题样式 */
.comparison-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #333;
}

.clear-description .comparison-title {
  color: #389e0d;
}

.vague-description .comparison-title {
  color: #cf1322;
}

/* 对比内容段落样式 */
.comparison-item p {
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.6;
}

/* 对比内容列表样式 */
.comparison-item ul {
  margin: 0;
  padding-left: 24px;
}

.comparison-item li {
  color: #333;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 响应式设计：在小屏幕上将对比容器改为垂直排列 */
@media (max-width: 768px) {
  .comparison-container {
    flex-direction: column;
  }
}
</style>












